<template>
  <div>
    <!-- 
      pinia 学习
      1、安装：
      yarn add pinia

      2、导入，实例化，当做插件使用，和其他插件使用套路相同
      在 mian.js 中
      import { createPinia } from 'pinia'
      const pinia = createPinia()
      createApp(App).use(pinia).mount('#app') （链式挂载使用pinia）

      3、创建仓库，使用仓库
      stores文件夹下创建仓库文件
      详情见 stores/testStore.ts

      4、在组件中使用（ useTestStore 是仓库文件中自己定义并导出的仓库名，并非固定名！ ）
      import { useTestStore } from '地址'
      const 变量名 = useTestStore()
    -->
    <h3>pinia 的使用</h3>
    <!-- 没有解构： -->
    <h4>没有解构：</h4>
    <div>pinia 中定义的 testCount:：{{ myPiniaTest.testCount }}</div>
    <div>pinia 中定义的类似 getters： 即 doubleTestCount： {{ myPiniaTest.doubleTestCount }}</div>
    <div><button @click="myPiniaTest.changeTestCount">点击使用普通方法修改值+1</button></div>
    <div><button @click="myPiniaTest.cahngeTestCountByAsync">点击使用异步方法两秒后修改值</button></div>

    <!-- 有解构： -->
    <h4>有解构（只能解构变量，不能解构方法）：</h4>
    <div>pinia 中定义的 testCount:：{{ testCount }}</div>
    <div>pinia 中定义的类似 getters： 即 doubleTestCount： {{ doubleTestCount }}</div>
    <div><button @click="myPiniaTest.changeTestCount">点击使用普通方法修改值+1</button></div>
    <div><button @click="myPiniaTest.cahngeTestCountByAsync">点击使用异步方法两秒后修改值</button></div>
  </div>
</template>

<script lang="ts" setup>
// 1、导入 pinia 中定义的仓库
import { useTestStore } from '../stores/testStore';
// 2、实例化仓库
const myPiniaTest = useTestStore()
// 3、使用
console.log(myPiniaTest.testCount);

// 解构后就无法出现响应式更新数据
// 解决：使用 storeToRefs 函数
// 注意：无法解构方法，只能解构变量，即只能解构 ref、reactive、computed 定义的变量
import { storeToRefs } from 'pinia';
const { testCount, doubleTestCount } = storeToRefs(myPiniaTest)

</script>

<style lang="scss" scoped></style>